<template>
    <div class="app-container">
        <el-row class="wrapper opration">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <!--工具条-->
                    <el-col :span="24" class="toolbar" style="padding-top:10px">
                        <el-form :inline="true">
                            <el-form-item>
                                <el-cascader style="width: 250px;" placeholder="请选择操作类型" expand-trigger="hover" :options="options" v-model="selectedOptions2">
                                </el-cascader>
                            </el-form-item>

                            <el-form-item>
                                <el-select style="width: 150px;" v-model="selectStaus" placeholder="请选择状态">
                                    <el-option v-for="item in status" :key="item.value" :label="item.value" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-date-picker :editable="false" v-model="times" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item style="width:170px">
                                <el-input v-model="queryKey" placeholder="关键字(针对操作对象)">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button icon="el-icon-search" @click="operLogQuery" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <!--page页的按钮-->
                    <el-col :span="24" class="toolbar" style="margin-top:10px;">
                        <!-- <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="40" style="float:right;">
                                                                                                                            </el-pagination> -->
                        <el-pagination @current-change="currentChange" style="text-align: right" layout="prev, pager, next" :page-count="totalPage">
                        </el-pagination>
                    </el-col>
                    <!--数据列表-->
                    <el-table v-loading="loadingOperateDataTable" :data="operateData" highlight-current-row style="width: 100%;">
                        <el-table-column :show-overflow-tooltip="true" prop="time" label="时间" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="duration" label="持续时间" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="f1" label="功能" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="f2" label="子功能" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="f3" label="操作类型" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" :formatter="formatContent" prop="content" label="操作对象" sortable></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="sts" label="状态" sortable></el-table-column>
                        <el-table-column :formatter="formatAuthor" prop="uname" label="发起者" sortable></el-table-column>
                    </el-table>

                    
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { Notification } from 'element-ui';
export default {
    data() {
        return {
            selectedOptions2: [],
            options: [],
            selectStaus: '',
            status: [{
                value: '全部'
            }, {
                value: '完成'
            }, {
                value: '失败'
            }],
            times: [new Date(new Date().setHours(0, 0, 0, 0)), new Date()],
            //时间控件
            pickerOptions2: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().setHours(0, 0, 0, 0))
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const end = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(23, 59, 59, 999));
                        const start = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0));
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            //查询关键词
            queryKey: '',
            currentPage: 1,
            totalPage: 0,
            //节点数据
            operateData: [
            ],
            // 操作审计查询遮罩
            loadingOperateDataTable: false,
        }
    },
    methods: {
        //操作日志类型查询
        operLogTypeQuery() {
            let url = this.projectConfig.URL_API_OPERLOG_TYPE_QUERY;
            this.httpClient.httpClientget(url).then((response) => {
                let data = response.data;
                this.options = data;
            });
        },

        //操作日志查询
        operLogQuery() {
            if (this.selectedOptions2.length == 0) {
                Notification.warning({
                    title: '温馨提示',
                    message: '请选择操作类型'
                });
                return;
            }
            if (this.selectStaus == '') {
                Notification.warning({
                    title: '温馨提示',
                    message: '请选择状态'
                });
                return;
            }
            if (this.times == ''||this.times==undefined) {
                Notification.warning({
                    title: '温馨提示',
                    message: '请选择时间'
                });
                return;
            }
            var url = this.projectConfig.URL_API_OPERLOG_QUERY;
            var ot = '';
            this.selectedOptions2.forEach(function(item) {
                if (ot == '') {
                    ot += item;
                } else {
                    ot += "," + item;
                }
            });
            var t1 = this.times + "";
            var ts = t1.split(',')[0];
            ts = ts.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
            var te = t1.split(',')[1];
            te = te.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
            var userId = this.userBaseInfo.getUserId();
            var isSuperAdmin = this.userBaseInfo.getIsSuperAdmin();
            if (isSuperAdmin) {
                userId = '';
            }
            let parm = {
                operType: ot,
                status: this.selectStaus,
                timeStart: ts,
                timeEnd: te,
                queryKey: this.queryKey,
                currentPage: this.currentPage,
                userId: userId
            }
            // 开启遮罩
            this.loadingOperateDataTable = true;
            this.httpClient.httpClientget(url, parm).then((response) => {
                // 遮罩结束
                this.loadingOperateDataTable = false;
                let data = response.data;
                let tp = data.totalPage;
                let dg = data.operLogs;
                this.totalPage = tp;
                this.operateData = dg;
            }).catch(error => {
                // 遮罩结束
                this.loadingOperateDataTable = false;
            });
        },
        //页面变化
        currentChange: function(currentPage) {
            this.currentPage = currentPage;
            this.operLogQuery();
        },
        //格式化列表内容
        formatContent: function(row, column, cellValue) {
            if (cellValue == undefined || cellValue == '') {
                return '对象:未知';
            } else {
                return '对象:' + cellValue;
            }
        },
        //格式化列表内容
        formatAuthor: function(row, column, cellValue) {
            if (cellValue == undefined || cellValue == '') {
                return '未知';
            } else {
                return cellValue;
            }
        }
    },
    mounted: function() {
        //查询操作日志类型
        this.operLogTypeQuery();
    }
}
</script>

<style>
.opration .el-table tr {
    text-align: center;
}

.opration .el-time {
    border: 1px solid;
    border-radius: 4px;
}

.opration .el-width {
    width: 400px;
}

.opration .el-bar {
    padding-bottom: 50px;
}

.opration .el-bar .nbd {
    border-bottom: none;
}

.opration .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.opration el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.opration .search .el-input {
    border: 1px solid #eaeaea;
}

.opration .el-date-editor--datetimerange {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.opration .el-table .cell {
    padding: 0;
}
</style>